import type { CSSProperties } from 'react'
import { ErrorBlock, Tag, Card } from '@/components/base'
import { Typography } from '@/components/typography'
import { Flex } from '@/components/flex'
import { List as VirtualizedList, AutoSizer } from 'react-virtualized'
import { useElementResize } from '@/utils/hooks'
import { ShoppingOutlined, AlertOutlined } from '@ant-design/icons'
import styles from './index.module.less';
import React from 'react'
import { PageController } from '../../page-controller'
import { useObserver } from 'mobx-react-lite'
import { useNavigate } from 'react-router-dom'
import { toCurrency } from '@/utils/funs'
import * as pages from '@/pages'
import * as apis from '@shared/apis'

const { Text } = Typography

export function ProductList() {
    const navigate = useNavigate();
    const pageController = React.useContext(PageController.Context);
    const data = useObserver(() => pageController.data);
    const { onRef, height } = useElementResize<HTMLDivElement>();

    const rowRenderer = React.useCallback(({ index, key, style }: { index: number, key: string, style: CSSProperties }) => {
        const product = data[index];
        if (!product) return null;

        const isLowStock = product.stockQuantity <= product.warningQuantity;
        const isOutOfStock = product.stockQuantity === 0;

        return (
            <div key={key} style={style}>
                <Card
                    className={styles['product-item']}
                    onClick={() => navigate(`/${pages.productDetailForm.name}?id=${product.id}`)}
                >
                    <Flex justify="space-between" align="flex-start">
                        <Flex vertical gap={8} style={{ width: '100%' }}>
                            <Flex justify="space-between" align="flex-start" style={{ width: '100%' }}>
                                <Flex vertical align='flex-start'>
                                    <Text strong size={16}>{product.name}</Text>
                                    <Text size={12} type="secondary" style={{ display: 'block', marginTop: 2 }}>
                                        编号：{product.code}
                                    </Text>
                                </Flex>

                                <Flex vertical align="flex-end">
                                    <Text size={18} strong type="primary">
                                        {toCurrency(product.retailPrice)}
                                    </Text>
                                    {(
                                        <Text size={12} type="secondary">
                                            会员价：{toCurrency(product.memberPrice)}
                                        </Text>
                                    )}
                                    {(
                                        <Text size={12} type="secondary">
                                            成本：{toCurrency(product.costPrice)}
                                        </Text>
                                    )}
                                    {(
                                        <Text size={12} type="secondary">
                                            赠送积分：{product.giftPoints}
                                        </Text>
                                    )}
                                </Flex>
                            </Flex>

                            <Flex gap={8} align="flex-start">
                                <Tag color="success">{apis.products.ProductStatusMap[product.status]}</Tag>
                                {product.category && <Tag color="primary">{product.category}</Tag>}
                                {product.brand && <Tag color="success">{product.brand}</Tag>}
                                <Tag color="warning">{product.isRecommended ? '推荐' : '不推荐'}</Tag>
                            </Flex>

                            <Flex gap={8} align="flex-start">
                                <Text size={12} type="secondary">
                                    <Text size={12} strong>规格：</Text>{product.specification || '无'}
                                </Text>
                                <Text size={12} type="secondary">
                                    <Text size={12} strong>库存：</Text>{product.stockQuantity}{product.unit}
                                </Text>
                            </Flex>

                            <Flex gap={8} align="center">
                                {isOutOfStock ? (
                                    <Flex gap={4} align="center">
                                        <AlertOutlined style={{ color: '#ff4d4f', fontSize: 12 }} />
                                        <Text size={12} type="danger">缺货</Text>
                                    </Flex>
                                ) : isLowStock ? (
                                    <Flex gap={4} align="center">
                                        <AlertOutlined style={{ color: '#faad14', fontSize: 12 }} />
                                        <Text size={12} type="warning">库存不足</Text>
                                    </Flex>
                                ) : (
                                    <Flex gap={4} align="center">
                                        <ShoppingOutlined style={{ color: '#52c41a', fontSize: 12 }} />
                                        <Text size={12} type="success">有库存</Text>
                                    </Flex>
                                )}
                            </Flex>
                        </Flex>
                    </Flex>
                </Card>
            </div>
        );
    }, [data, navigate]);

    const loadMore = React.useCallback(() => {
        pageController.page++;
        pageController.query();
    }, [pageController]);

    if (data.length === 0) {
        return (
            <ErrorBlock
                status="empty"
                title="暂无产品数据"
                description="请添加产品信息"
            />
        );
    }

    return (
        <div ref={onRef} style={{ flex: 1 }}>
            <AutoSizer>
                {({ width }) => (
                    <VirtualizedList
                        width={width}
                        height={height}
                        rowCount={data.length}
                        rowHeight={200}
                        rowRenderer={rowRenderer}
                        onScroll={({ scrollTop, scrollHeight, clientHeight }) => {
                            if (scrollTop + clientHeight >= scrollHeight - 100) {
                                loadMore();
                            }
                        }}
                    />
                )}
            </AutoSizer>
        </div>
    );
} 